<template>
    <div class="subGoods">
        <section>
            <!-- 单选组 -->
            <div class="left">
                <p v-for="(item, index) in btnList" :key="index">
                    <input v-model="sortField" type="radio" name="sortArea" :id="index" :value="item.val">
                    <label :for="index">{{ item.name }}</label>
                </p>
                <p>
                    <span class="dan2">价格排序</span>
                    <span class="one"></span>
                    <span class="two"></span>
                </p>
            </div>
            <!-- 复选组 -->
            <div class="right">
                <p>
                    <input type="radio" name="" id="">
                    <label>仅显示有货商品</label>
                    <input type="radio" name="" id="">
                    <label>仅显示特惠商品</label>
                </p>
            </div>
        </section>
        <!-- 商品渲染区 -->
        <div class="goodList">
            <ul>
                <li v-for="item in goodList" :key="item.id" @click="goDetail(item.id)">
                    <img :src="item.picture" alt="">
                    <p>{{ item.name }}</p>
                    <p>{{ item.desc }}</p>
                    <p>
                        <span>{{ item.price }}</span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { getSubGoods } from '@/utils/api/categoryapi'
export default {
    data() {
        return {
            btnList: [
                {
                    name: '默认排序',
                    val: 'publishTime'
                },
                {
                    name: '最新商品',
                    val: 'orderNum'
                },
                {
                    name: '最高人气',
                    val: 'price'
                },
                {
                    name: '品论最多',
                    val: 'evaluateNum'
                },
            ],
            sortField: 'publishTime',
            goodList: [],
            query: {
                categoryId: null,
                page: 1,
                pageSize: 200,
            }
        }
    },
    methods: {
        async getGoodList() {
            let res = await getSubGoods(this.query);
            console.log(res);
            this.goodList = res.result.items;
        },
        /* 跳转到详情页 */
        goDetail(id) {
            this.$router.push('/detail?id=' + id);
        }
    },
    mounted() {
        this.query.categoryId = this.$route.query.id;
        this.getGoodList();
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/components';

.subGoods {
    margin-top: 20px;
    background-color: white;

    section {
        width: 100%;
        height: 60px;
        // background-color: red;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 20px;

        .left {
            display: flex;

            p {
                input {
                    display: none;
                }

                label {
                    width: 120px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    margin-right: 20px;
                    border: 1px solid #ccc;
                }

                input:checked+label {
                    background-color: #27ba9b;
                }
            }

            p:nth-child(5) {
                width: 100px;
                height: 40px;
                border: 1px solid #ccc;
                position: relative;

                .dan2 {
                    // text-align: center;
                    line-height: 40px;
                    margin-right: 20px;
                    font-size: 16px;
                }

                .one {
                    display: block;
                    width: 0;
                    height: 0;
                    border: 8px solid transparent;
                    border-top-color: black;
                    position: absolute;
                    top: 14px;
                    right: 5px;
                }

                .one:hover {
                    border-top-color: #27ba9b;
                }

                .two {
                    display: block;
                    width: 0;
                    height: 0;
                    border: 8px solid transparent;
                    border-bottom-color: black;
                    position: absolute;
                    top: 14px;
                    right: 5px;
                }

                .two:hover {
                    border-bottom-color: #27ba9b;
                }
            }
        }

        .right {
            display: flex;

            p {

                input {
                    width: 10px;
                    height: 10px;
                    border-color: #ccc;
                }
            }
        }
    }

    .goodList {
        width: 100%;

        // height: 200px;
        // background-color: red;
        ul {
            width: 90%;
            // height: 400px;
            // background-color: yellow;
            margin: 20px auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            li {
                width: 18%;
                height: 260px;
                // background-color: green;
                padding: 20px;
                margin-top: 20px;
                @include hoverShadow();

                p {
                    font-size: 20px;
                    text-align: center;
                    overflow: hidden; //（文字长度超出限定宽度，则隐藏超出的内容）
                    white-space: nowrap; //（设置文字在一行显示，不能换行）
                    text-overflow: ellipsis; //（规定当文本溢出时，显示省略符号来代表被修剪的文本）

                    span {
                        color: red;
                    }
                }
            }

            li:hover {
                border: 1px solid black;
                box-shadow: 0 0 10px black;
            }
        }
    }
}
</style>